import React, { useEffect, useState } from 'react';
import {
  LineChart,
  Line,
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
  PieChart,
  Pie,
  Cell,
  RadarChart,
  Radar,
  PolarGrid,
  PolarAngleAxis,
  PolarRadiusAxis
} from 'recharts';
import {
  ArrowUp,
  ArrowDown,
  TrendingUp,
  TrendingDown,
  DollarSign,
  Globe,
  Shield,
  Activity,
  Clock,
  Calendar,
  AlertTriangle,
  ChevronDown,
  ChevronUp,
  Menu,
  X
} from 'lucide-react';
import { motion, AnimatePresence } from 'framer-motion';

const GoldMarketReport = () => {
  const [activeSection, setActiveSection] = useState('price');
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
  const [expandedFactors, setExpandedFactors] = useState({
    macro: false,
    geopolitics: false,
    monetary: false,
    sentiment: false
  });

  // 价格走势数据
  const priceData = [
    { date: '4/1', price: 3200 },
    { date: '4/8', price: 3280 },
    { date: '4/15', price: 3350 },
    { date: '4/22', price: 3500, high: true },
    { date: '4/29', price: 3420 },
    { date: '5/6', price: 3300 },
    { date: '5/14', price: 3220, drop: true },
    { date: '5/19', price: 3249, rebound: true }
  ];

  // 交易量数据
  const volumeData = [
    { month: '1月', volume: 3200 },
    { month: '2月', volume: 3500 },
    { month: '3月', volume: 3800 },
    { month: '4月', volume: 4410, high: true },
    { month: '5月', volume: 4000 }
  ];

  // 影响因素数据
  const macroFactors = [
    { name: '全球GDP增速', value: 2.1, change: -0.3, trend: 'down' },
    { name: '美国CPI', value: 2.3, change: -0.2, trend: 'down' },
    { name: '美联储利率', value: 5.25, change: 0, trend: 'neutral' }
  ];

  const geopoliticsFactors = [
    { name: '中美关税取消率', value: 91, change: 15, trend: 'up' },
    { name: '俄乌冲突风险', value: 65, change: -10, trend: 'down' }
  ];

  const monetaryFactors = [
    { name: '央行购金量(吨)', value: 244, change: 30, trend: 'up' },
    { name: '9月降息概率', value: 70.6, change: 5, trend: 'up' }
  ];

  const sentimentFactors = [
    { name: '避险情绪指数', value: 75, change: 15, trend: 'up' },
    { name: 'ETF流入(亿)', value: 110, change: 40, trend: 'up' }
  ];

  // 供需数据
  const supplyData = [
    { name: '矿产', value: 2400 },
    { name: '回收', value: 1200 }
  ];

  const demandData = [
    { name: '央行', value: 900 },
    { name: '投资', value: 1500 },
    { name: '消费', value: 800 }
  ];

  // 机构预测数据
  const forecastData = [
    { org: '高盛', target: 3700, color: '#e74c3c' },
    { org: '摩根大通', target: 3500, color: '#e74c3c' },
    { org: '中信证券', target: 3400, color: '#e74c3c' },
    { org: '巴克莱', target: 2600, color: '#2ecc71' }
  ];

  const COLORS = ['#3498db', '#f1c40f', '#2ecc71', '#e74c3c'];

  // 滚动监听
  useEffect(() => {
    const handleScroll = () => {
      const sections = ['price', 'trade', 'factors', 'supply', 'outlook', 'advice'];

      for (const section of sections) {
        const element = document.getElementById(section);
        if (!element) continue;

        const rect = element.getBoundingClientRect();
        if (rect.top <= 100 && rect.bottom >= 100) {
          setActiveSection(section);
          break;
        }
      }
    };

    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  // 平滑滚动
  const scrollToSection = sectionId => {
    const element = document.getElementById(sectionId);
    if (element) {
      element.scrollIntoView({ behavior: 'smooth' });
      setActiveSection(sectionId);
      setIsMobileMenuOpen(false);
    }
  };

  const toggleFactor = factor => {
    setExpandedFactors(prev => ({
      ...prev,
      [factor]: !prev[factor]
    }));
  };

  return (
    <div className="min-h-screen font-sans bg-gray-50 text-gray-800">
      {/* 导航条 */}
      <nav className="sticky top-0 z-50 p-4 bg-white shadow-md">
        <div className="container mx-auto flex items-center justify-between">
          <div className="text-xl font-bold text-blue-600 flex items-center">
            <DollarSign className="mr-2" /> 2025黄金市场研报
          </div>
          <div className="hidden md:flex space-x-6">
            {[
              { id: 'price', label: '价格走势' },
              { id: 'trade', label: '市场交易' },
              { id: 'factors', label: '影响因素' },
              { id: 'supply', label: '供需分析' },
              { id: 'outlook', label: '后市展望' },
              { id: 'advice', label: '投资建议' }
            ].map(item => (
              <button
                key={item.id}
                onClick={() => scrollToSection(item.id)}
                className={`${
                  activeSection === item.id ? 'text-blue-600 font-medium' : 'text-gray-600'
                } hover:text-blue-500 transition-colors`}
              >
                {item.label}
              </button>
            ))}
          </div>
          <button
            className="md:hidden text-gray-600 p-2 rounded-md hover:bg-gray-100"
            onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
          >
            {isMobileMenuOpen ? <X size={20} /> : <Menu size={20} />}
          </button>
        </div>

        {/* 移动端菜单 */}
        <AnimatePresence>
          {isMobileMenuOpen && (
            <motion.div
              initial={{ opacity: 0, height: 0 }}
              animate={{ opacity: 1, height: 'auto' }}
              exit={{ opacity: 0, height: 0 }}
              className="md:hidden bg-white shadow-lg mt-2"
            >
              <div className="flex flex-col space-y-2 p-4">
                {[
                  { id: 'price', label: '价格走势' },
                  { id: 'trade', label: '市场交易' },
                  { id: 'factors', label: '影响因素' },
                  { id: 'supply', label: '供需分析' },
                  { id: 'outlook', label: '后市展望' },
                  { id: 'advice', label: '投资建议' }
                ].map(item => (
                  <button
                    key={item.id}
                    onClick={() => scrollToSection(item.id)}
                    className={`${
                      activeSection === item.id ? 'text-blue-600 font-medium' : 'text-gray-600'
                    } py-2 text-left`}
                  >
                    {item.label}
                  </button>
                ))}
              </div>
            </motion.div>
          )}
        </AnimatePresence>
      </nav>

      {/* 主要内容 */}
      <div className="container mx-auto py-8 px-4">
        {/* 价格走势部分 */}
        <section id="price" className="mb-16">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5 }}
            viewport={{ once: true }}
            className="bg-white rounded-lg shadow-md p-6"
          >
            <h2 className="text-2xl font-bold mb-6 flex items-center">
              <TrendingUp className="mr-2 text-blue-600" /> 价格走势
            </h2>

            <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
              <div className="lg:col-span-2">
                <div className="h-80">
                  <ResponsiveContainer width="100%" height="100%">
                    <LineChart data={priceData}>
                      <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
                      <XAxis dataKey="date" />
                      <YAxis domain={[3000, 3600]} />
                      <Tooltip />
                      <Line
                        type="monotone"
                        dataKey="price"
                        stroke="#3498db"
                        strokeWidth={2}
                        dot={{ r: 4 }}
                        activeDot={{ r: 6 }}
                      />
                      {priceData.map((entry, index) => (
                        entry?.high && (
                          <svg key={`high-${index}`}>
                            <text
                              x={index * 100 + 30}
                              y={20}
                              fill="#e74c3c"
                              fontSize={12}
                              fontWeight="bold"
                            >
                              历史新高 3500
                            </text>
                          </svg>
                        )
                      ))}
                      {priceData.map((entry, index) => (
                        entry?.drop && (
                          <svg key={`drop-${index}`}>
                            <text
                              x={index * 100 + 30}
                              y={40}
                              fill="#e74c3c"
                              fontSize={12}
                              fontWeight="bold"
                            >
                              最大跌幅 72
                            </text>
                          </svg>
                        )
                      ))}
                      {priceData.map((entry, index) => (
                        entry?.rebound && (
                          <svg key={`rebound-${index}`}>
                            <text
                              x={index * 100 + 30}
                              y={60}
                              fill="#2ecc71"
                              fontSize={12}
                              fontWeight="bold"
                            >
                              反弹至 3240
                            </text>
                          </svg>
                        )
                      ))}
                    </LineChart>
                  </ResponsiveContainer>
                </div>
              </div>

              <div className="space-y-4">
                <div className="bg-blue-50 p-4 rounded-lg">
                  <h3 className="font-semibold text-blue-800 mb-2">关键价格点</h3>
                  <ul className="space-y-2">
                    <li className="flex items-center">
                      <span className="w-3 h-3 rounded-full bg-red-500 mr-2"></span>
                      <span>历史新高: <span className="font-bold">3500</span> 美元/盎司 (4/22)</span>
                    </li>
                    <li className="flex items-center">
                      <span className="w-3 h-3 rounded-full bg-red-500 mr-2"></span>
                      <span>最大跌幅: <span className="font-bold">72</span> 美元 (5/14)</span>
                    </li>
                    <li className="flex items-center">
                      <span className="w-3 h-3 rounded-full bg-green-500 mr-2"></span>
                      <span>反弹至: <span className="font-bold">3240</span> 美元 (5/19)</span>
                    </li>
                    <li className="flex items-center">
                      <span className="w-3 h-3 rounded-full bg-yellow-500 mr-2"></span>
                      <span>COMEX涨幅: <span className="font-bold">1.47%</span></span>
                    </li>
                  </ul>
                </div>

                <div className="bg-gray-50 p-4 rounded-lg">
                  <h3 className="font-semibold text-gray-800 mb-2">近期表现</h3>
                  <p className="text-sm text-gray-600">
                    2025年以来，黄金价格经历了显著波动。4月22日创下历史新高3500美元/盎司，随后回调，5月14日单日暴跌约72美元/盎司，跌幅达2.23%。5月19日现货黄金重返3240美元/盎司上方，COMEX黄金暴涨1.47%。
                  </p>
                </div>
              </div>
            </div>
          </motion.div>
        </section>

        {/* 市场交易部分 */}
        <section id="trade" className="mb-16">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: 0.1 }}
            viewport={{ once: true }}
            className="bg-white rounded-lg shadow-md p-6"
          >
            <h2 className="text-2xl font-bold mb-6 flex items-center">
              <Activity className="mr-2 text-blue-600" /> 市场交易情况
            </h2>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <h3 className="font-semibold mb-4">交易量变化</h3>
                <div className="h-64">
                  <ResponsiveContainer width="100%" height="100%">
                    <BarChart data={volumeData}>
                      <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
                      <XAxis dataKey="month" />
                      <YAxis />
                      <Tooltip />
                      <Bar dataKey="volume" fill="#3498db" />
                    </BarChart>
                  </ResponsiveContainer>
                </div>
                <p className="text-sm text-gray-600 mt-2">
                  4月平均每日交易量达4410亿美元，环比增长48%。伦敦金银市场协会场外交易额达到1810亿美元/日，环比增长31%。
                </p>
              </div>

              <div>
                <h3 className="font-semibold mb-4">持仓情况</h3>
                <div className="bg-gray-50 p-4 rounded-lg mb-4">
                  <div className="flex justify-between items-center mb-2">
                    <span className="font-medium">COMEX黄金期货净多头仓位</span>
                    <span className="text-red-500 font-bold">-30%</span>
                  </div>
                  <div className="h-2 bg-gray-200 rounded-full">
                    <div className="h-2 bg-red-500 rounded-full" style={{ width: '70%' }}></div>
                  </div>
                  <p className="text-sm text-gray-600 mt-2">
                    截至4月底降至566吨，较2024年平均水平下降35%。
                  </p>
                </div>

                <div className="bg-gray-50 p-4 rounded-lg">
                  <div className="flex justify-between items-center mb-2">
                    <span className="font-medium">基金经理净多头仓位</span>
                    <span className="text-red-500 font-bold">-35%</span>
                  </div>
                  <div className="h-2 bg-gray-200 rounded-full">
                    <div className="h-2 bg-red-500 rounded-full" style={{ width: '65%' }}></div>
                  </div>
                  <p className="text-sm text-gray-600 mt-2">
                    4月底已降至360吨，空头仓位小幅上升。
                  </p>
                </div>
              </div>
            </div>
          </motion.div>
        </section>

        {/* 影响因素部分 */}
        <section id="factors" className="mb-16">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: 0.2 }}
            viewport={{ once: true }}
            className="bg-white rounded-lg shadow-md p-6"
          >
            <h2 className="text-2xl font-bold mb-6 flex items-center">
              <Globe className="mr-2 text-blue-600" /> 影响黄金价格的因素分析
            </h2>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              {/* 宏观经济因素 */}
              <motion.div
                whileHover={{ y: -5 }}
                className="bg-blue-50 rounded-lg p-4"
              >
                <div
                  className="flex justify-between items-center cursor-pointer"
                  onClick={() => toggleFactor('macro')}
                >
                  <h3 className="font-semibold text-blue-800 flex items-center">
                    <TrendingUp className="mr-2" /> 宏观经济因素
                  </h3>
                  {expandedFactors.macro ? <ChevronUp /> : <ChevronDown />}
                </div>

                <AnimatePresence>
                  {expandedFactors.macro && (
                    <motion.div
                      initial={{ opacity: 0, height: 0 }}
                      animate={{ opacity: 1, height: 'auto' }}
                      exit={{ opacity: 0, height: 0 }}
                      className="overflow-hidden"
                    >
                      <div className="mt-4 space-y-4">
                        {macroFactors.map((factor, index) => (
                          <div key={index} className="flex items-center justify-between">
                            <span>{factor.name}</span>
                            <div className="flex items-center">
                              <span className="font-bold mr-2">{factor.value}{factor.name.includes('%') ? '%' : ''}</span>
                              {factor.trend === 'up' && <ArrowUp className="text-green-500" />}
                              {factor.trend === 'down' && <ArrowDown className="text-red-500" />}
                              {factor.trend === 'neutral' && <span className="text-gray-500">-</span>}
                            </div>
                          </div>
                        ))}
                      </div>

                      <div className="mt-4 text-sm text-gray-700">
                        <p className="mb-2">
                          IMF预测全球经济增长将下滑，下行风险加剧。世界银行预测全球经济将稳定在较低增长水平。
                        </p>
                        <p className="mb-2">
                          美国第一季度经济增长动能减弱，衰退风险上升。美联储维持利率不变，但独立性面临挑战。
                        </p>
                        <p>
                          IMF预计全球总体通胀将继续下降，但速度可能慢于预期。美国4月CPI同比2.3%低于预期。
                        </p>
                      </div>
                    </motion.div>
                  )}
                </AnimatePresence>
              </motion.div>

              {/* 地缘政治因素 */}
              <motion.div
                whileHover={{ y: -5 }}
                className="bg-purple-50 rounded-lg p-4"
              >
                <div
                  className="flex justify-between items-center cursor-pointer"
                  onClick={() => toggleFactor('geopolitics')}
                >
                  <h3 className="font-semibold text-purple-800 flex items-center">
                    <Globe className="mr-2" /> 地缘政治因素
                  </h3>
                  {expandedFactors.geopolitics ? <ChevronUp /> : <ChevronDown />}
                </div>

                <AnimatePresence>
                  {expandedFactors.geopolitics && (
                    <motion.div
                      initial={{ opacity: 0, height: 0 }}
                      animate={{ opacity: 1, height: 'auto' }}
                      exit={{ opacity: 0, height: 0 }}
                      className="overflow-hidden"
                    >
                      <div className="mt-4 space-y-4">
                        {geopoliticsFactors.map((factor, index) => (
                          <div key={index} className="flex items-center justify-between">
                            <span>{factor.name}</span>
                            <div className="flex items-center">
                              <span className="font-bold mr-2">{factor.value}%</span>
                              {factor.trend === 'up' && <ArrowUp className="text-green-500" />}
                              {factor.trend === 'down' && <ArrowDown className="text-red-500" />}
                            </div>
                          </div>
                        ))}
                      </div>

                      <div className="mt-4 text-sm text-gray-700">
                        <p className="mb-2">
                          中美贸易谈判取得进展，双方同时大幅降低"对等关税"税率，美方取消了91%的加征关税。
                        </p>
                        <p>
                          俄乌重启谈判、印巴停火协议降低避险情绪，但中东局势仍存在潜在升级风险。
                        </p>
                      </div>
                    </motion.div>
                  )}
                </AnimatePresence>
              </motion.div>

              {/* 货币政策因素 */}
              <motion.div
                whileHover={{ y: -5 }}
                className="bg-green-50 rounded-lg p-4"
              >
                <div
                  className="flex justify-between items-center cursor-pointer"
                  onClick={() => toggleFactor('monetary')}
                >
                  <h3 className="font-semibold text-green-800 flex items-center">
                    <DollarSign className="mr-2" /> 货币政策因素
                  </h3>
                  {expandedFactors.monetary ? <ChevronUp /> : <ChevronDown />}
                </div>

                <AnimatePresence>
                  {expandedFactors.monetary && (
                    <motion.div
                      initial={{ opacity: 0, height: 0 }}
                      animate={{ opacity: 1, height: 'auto' }}
                      exit={{ opacity: 0, height: 0 }}
                      className="overflow-hidden"
                    >
                      <div className="mt-4 space-y-4">
                        {monetaryFactors.map((factor, index) => (
                          <div key={index} className="flex items-center justify-between">
                            <span>{factor.name}</span>
                            <div className="flex items-center">
                              <span className="font-bold mr-2">{factor.value}{factor.name.includes('%') ? '%' : ''}</span>
                              {factor.trend === 'up' && <ArrowUp className="text-green-500" />}
                              {factor.trend === 'down' && <ArrowDown className="text-red-500" />}
                            </div>
                          </div>
                        ))}
                      </div>

                      <div className="mt-4 text-sm text-gray-700">
                        <p className="mb-2">
                          市场预计美联储6月维持利率不变的概率为91.4%，首次降息时点预期推迟至9月。
                        </p>
                        <p>
                          2025年一季度全球央行净购金244吨，中国连续6个月增持黄金储备。摩根大通预计2025年全球央行购金量将达到900吨。
                        </p>
                      </div>
                    </motion.div>
                  )}
                </AnimatePresence>
              </motion.div>

              {/* 市场情绪因素 */}
              <motion.div
                whileHover={{ y: -5 }}
                className="bg-yellow-50 rounded-lg p-4"
              >
                <div
                  className="flex justify-between items-center cursor-pointer"
                  onClick={() => toggleFactor('sentiment')}
                >
                  <h3 className="font-semibold text-yellow-800 flex items-center">
                    <Activity className="mr-2" /> 市场情绪因素
                  </h3>
                  {expandedFactors.sentiment ? <ChevronUp /> : <ChevronDown />}
                </div>

                <AnimatePresence>
                  {expandedFactors.sentiment && (
                    <motion.div
                      initial={{ opacity: 0, height: 0 }}
                      animate={{ opacity: 1, height: 'auto' }}
                      exit={{ opacity: 0, height: 0 }}
                      className="overflow-hidden"
                    >
                      <div className="mt-4 space-y-4">
                        {sentimentFactors.map((factor, index) => (
                          <div key={index} className="flex items-center justify-between">
                            <span>{factor.name}</span>
                            <div className="flex items-center">
                              <span className="font-bold mr-2">{factor.value}{factor.name.includes('亿') ? '亿' : ''}</span>
                              {factor.trend === 'up' && <ArrowUp className="text-green-500" />}
                              {factor.trend === 'down' && <ArrowDown className="text-red-500" />}
                            </div>
                          </div>
                        ))}
                      </div>

                      <div className="mt-4 text-sm text-gray-700">
                        <p className="mb-2">
                          穆迪将美国主权信用评级从Aaa下调至Aa1，引发国际市场动荡，黄金受避险情绪提振再度走强。
                        </p>
                        <p>
                          此前金价连续上涨并达到历史高位，年内累计涨幅超25%，投机性交易过度活跃导致获利了结。
                        </p>
                      </div>
                    </motion.div>
                  )}
                </AnimatePresence>
              </motion.div>
            </div>
          </motion.div>
        </section>

        {/* 供需分析部分 */}
        <section id="supply" className="mb-16">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: 0.3 }}
            viewport={{ once: true }}
            className="bg-white rounded-lg shadow-md p-6"
          >
            <h2 className="text-2xl font-bold mb-6 flex items-center">
              <Shield className="mr-2 text-blue-600" /> 黄金市场供需分析
            </h2>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <h3 className="font-semibold mb-4">供给方面</h3>
                <div className="h-64">
                  <ResponsiveContainer width="100%" height="100%">
                    <PieChart>
                      <Pie
                        data={supplyData}
                        cx="50%"
                        cy="50%"
                        labelLine={false}
                        outerRadius={80}
                        fill="#8884d8"
                        dataKey="value"
                        label={({ name, percent }) => `${name} ${(percent * 100).toFixed(0)}%`}
                      >
                        {supplyData.map((entry, index) => (
                          <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                        ))}
                      </Pie>
                      <Tooltip />
                    </PieChart>
                  </ResponsiveContainer>
                </div>
                <div className="mt-4 text-sm text-gray-600">
                  <p className="mb-2">
                    全球黄金矿产产量增速放缓，2024年为2.5%，2025年一季度矿山产量仅增加2.1吨。
                  </p>
                  <p>
                    4月黄金回收克重环比增长70%，回收价格一度攀升至800元/克以上，大量黄金回流市场。
                  </p>
                </div>
              </div>

              <div>
                <h3 className="font-semibold mb-4">需求方面</h3>
                <div className="h-64">
                  <ResponsiveContainer width="100%" height="100%">
                    <RadarChart cx="50%" cy="50%" outerRadius="80%" data={demandData}>
                      <PolarGrid />
                      <PolarAngleAxis dataKey="name" />
                      <PolarRadiusAxis />
                      <Radar
                        name="需求"
                        dataKey="value"
                        stroke="#3498db"
                        fill="#3498db"
                        fillOpacity={0.6}
                      />
                      <Tooltip />
                    </RadarChart>
                  </ResponsiveContainer>
                </div>
                <div className="mt-4 text-sm text-gray-600">
                  <p className="mb-2">
                    2025年一季度全球央行净购金244吨，中国连续6个月增持黄金储备。
                  </p>
                  <p className="mb-2">
                    4月全球实物黄金ETF吸金110亿美元，中国市场单月流入量已超一季度总和。
                  </p>
                  <p>
                    高金价抑制了黄金首饰消费，国内金饰需求疲软(一季度同比下降26.85%)。
                  </p>
                </div>
              </div>
            </div>
          </motion.div>
        </section>

        {/* 后市展望部分 */}
        <section id="outlook" className="mb-16">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: 0.4 }}
            viewport={{ once: true }}
            className="bg-white rounded-lg shadow-md p-6"
          >
            <h2 className="text-2xl font-bold mb-6 flex items-center">
              <Calendar className="mr-2 text-blue-600" /> 黄金市场后市展望
            </h2>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <h3 className="font-semibold mb-4 flex items-center">
                  <Clock className="mr-2 text-blue-500" /> 短期展望
                </h3>
                <div className="bg-blue-50 p-4 rounded-lg mb-4">
                  <p className="text-sm text-gray-700">
                    短期内，黄金市场可能继续承压，市场情绪偏向谨慎。金价或将测试3200美元/盎司的关键支撑。若此支撑失守，则可能进一步下探更低水平。技术面显示看空信号，反弹可能面临较强阻力。
                  </p>
                </div>
                <div className="text-sm text-gray-600">
                  <p className="mb-2">
                    需密切关注中美贸易谈判的后续进展、主要经济体即将发布的经济数据(尤其是美国通胀和就业数据)以及美联储官员的讲话。
                  </p>
                  <p>
                    5月20日PPI数据若低于预期(如环比下降0.5%)，可能强化降息预期，利多黄金；若超预期回升，将巩固美联储鹰派立场。
                  </p>
                </div>
              </div>

              <div>
                <h3 className="font-semibold mb-4 flex items-center">
                  <TrendingUp className="mr-2 text-green-500" /> 中长期展望
                </h3>
                <div className="bg-green-50 p-4 rounded-lg mb-4">
                  <p className="text-sm text-gray-700">
                    全球经济增长放缓的预期、持续的地缘政治不确定性以及部分主要央行的宽松货币政策，仍是支撑黄金价格的中长期因素。
                  </p>
                </div>
                <div className="text-sm text-gray-600">
                  <p className="mb-2">
                    若美国经济数据进一步走弱，市场对美联储降息的预期可能重新升温，这将对黄金构成利好。
                  </p>
                  <p className="mb-2">
                    全球债务水平高企、以及潜在的金融市场波动风险，也可能在特定时期提升黄金的避险价值。
                  </p>
                  <p>
                    "全球南方"国家央行持续购金的趋势也可能为黄金需求提供结构性支撑。
                  </p>
                </div>
              </div>
            </div>

            <div className="mt-8">
              <h3 className="font-semibold mb-4">机构预测</h3>
              <div className="overflow-x-auto">
                <table className="min-w-full bg-white rounded-lg overflow-hidden">
                  <thead className="bg-gray-100">
                    <tr>
                      <th className="py-2 px-4 text-left">机构</th>
                      <th className="py-2 px-4 text-left">目标价(美元)</th>
                      <th className="py-2 px-4 text-left">观点</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-gray-200">
                    {forecastData.map((forecast, index) => (
                      <tr key={index}>
                        <td className="py-2 px-4">{forecast.org}</td>
                        <td className="py-2 px-4 font-bold">{forecast.target}</td>
                        <td className="py-2 px-4">
                          {forecast.target > 3400 ? (
                            <span className="text-red-500">看涨</span>
                          ) : forecast.target < 3000 ? (
                            <span className="text-green-500">看跌</span>
                          ) : (
                            <span className="text-gray-500">中性</span>
                          )}
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
              <div className="mt-4 text-sm text-gray-600">
                <p>
                  高盛维持年底金价3700美元的目标，极端情况下或达4500美元；摩根大通强调"货币体系重构支撑金价"；巴克莱预计金价将回调至2500至2700美元；中信证券认为第三季度金价的震荡区间为3100至3400美元。
                </p>
              </div>
            </div>
          </motion.div>
        </section>

        {/* 投资建议部分 */}
        <section id="advice" className="mb-16">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: 0.5 }}
            viewport={{ once: true }}
            className="bg-white rounded-lg shadow-md p-6"
          >
            <h2 className="text-2xl font-bold mb-6 flex items-center">
              <AlertTriangle className="mr-2 text-blue-600" /> 投资建议
            </h2>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <h3 className="font-semibold mb-4 text-blue-600">短期策略</h3>
                <div className="bg-blue-50 p-4 rounded-lg mb-4">
                  <ul className="list-disc pl-5 space-y-2 text-sm text-gray-700">
                    <li>警惕技术性抛售与政策变动带来的扰动，保持冷静和理性</li>
                    <li>避免盲目追涨杀跌，防止因市场短期波动而造成不必要的损失</li>
                    <li>短期交易应以逢高布局空单为主，并严格设置止损(如3315美元上方)</li>
                    <li>若站稳3200美元且PPI数据疲软，可轻仓试多，目标3250-3280美元</li>
                    <li>若美元指数突破101.2或地缘风险降温，可逢高做空，目标3150美元</li>
                  </ul>
                </div>
              </div>

              <div>
                <h3 className="font-semibold mb-4 text-green-600">中长期策略</h3>
                <div className="bg-green-50 p-4 rounded-lg mb-4">
                  <ul className="list-disc pl-5 space-y-2 text-sm text-gray-700">
                    <li>将黄金配置比例提升至10%-15%</li>
                    <li>利用回调至3150至3200美元区间逐步买入</li>
                    <li>重点跟踪央行的购金动向及地缘政治变化</li>
                    <li>稳健型投资者选择黄金ETF</li>
                    <li>风险偏好较强的投资者考虑黄金股ETF</li>
                    <li>探索"微克金"积存或黄金租赁服务</li>
                  </ul>
                </div>
              </div>
            </div>

            <div className="mt-6">
              <h3 className="font-semibold mb-4 text-yellow-600">风险控制</h3>
              <div className="bg-yellow-50 p-4 rounded-lg">
                <ul className="list-disc pl-5 space-y-2 text-sm text-gray-700">
                  <li>避免在市场亢奋时追高</li>
                  <li>参考黄金/白银比(当前为85倍，历史均值为68倍)判断市场过热程度</li>
                  <li>采用"金字塔加仓"策略管理仓位</li>
                  <li>密切跟踪美国的关税政策、美联储议息会议及中美贸易谈判进展</li>
                </ul>
              </div>
            </div>
          </motion.div>
        </section>
      </div>

      {/* 页脚 */}
      <footer className="bg-gray-800 text-gray-300 py-8">
        <div className="container mx-auto px-4">
          <div className="text-center">
            <p className="mb-2">created by Oasis AI</p>
            <p className="text-sm">页面内容均由 AI 生成，仅供参考</p>
          </div>
        </div>
      </footer>
    </div>
  );
};

// Export the component for use in other files
export { GoldMarketReport };
export default GoldMarketReport;